<template>
    <el-dialog v-model="visible" class="promote-dialog" title="推广" width="800">
        <div class="promote-dialog-body">
            <div class="promote-dialog-body-left">
                <h2 class="custom-title">二维码</h2>
                <el-image :src="qrcode" style="width: 130px; height: 130px" :preview-src-list="[qrcode]"> </el-image>
                <div class="custom-download" @click="download">下载</div>
            </div>
            <div class="promote-dialog-body-right">
                <h2 class="custom-title">链接分享</h2>
                <div class="share-link">
                    <el-input :value="url" disabled></el-input>
                    <el-button :disabled="!url" color="#FF6B00" plain @click="copy">复制</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, defineExpose } from 'vue';
import useClipboard from 'vue-clipboard3';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { DOWLOAD_FILE } from '@/utils/smartMarketing';
import { promoteCollect } from '@/api/highMaterial/collectionTable';

const { toClipboard } = useClipboard();

const visible = ref(false);
const qrcode = ref();
const url = ref();
const title = ref();

const download = () => {
    DOWLOAD_FILE(qrcode.value, title.value + dayjs(new Date()).format('YYYY-MM-DD HH.mm.ss') + '.png');
};

const copy = async () => {
    try {
        await toClipboard(url.value);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

const open = async row => {
    // 打开推广弹窗
    const data = await promoteCollect({ id: row.id });
    qrcode.value = data?.qr_code_link;
    url.value = data?.form_url;
    visible.value = true;
    title.value = row.title;
};

defineExpose({
    open
});
</script>

<style lang="scss" scoped>
.promote-dialog {
    &-body {
        padding: 22px;
        display: flex;
        align-items: flex-start;
        overflow: hidden;
        height: auto;

        &-left {
            padding: 0 20px 0 0;
            box-sizing: border-box;
            border-right: 1px #ddd dashed;
            margin-right: 20px;
        }

        &-right {
            height: 100%;
            flex: 1;

            .share-link {
                display: flex;
            }

            .share-link .el-button {
                margin-left: 12px;
            }
        }

        .custom-title {
            color: #333;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .custom-download {
            cursor: pointer;
            margin-top: 10px;
            color: #ff6b00;
            text-align: center;
        }
    }
}
</style>
